<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Red Dead Online - Collectors Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description"
    content="Red Dead Online Collectors Map. Find all collectibles across the world and sell to Madam Nazar.">
  <meta name="keywords"
    content="Red Dead Online, Collectors Map, Collectors Map, Map, Interactive Map, Interactive, jeanropke map, jeanropke">

  <link rel="apple-touch-icon" sizes="60x60" href="./apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
  <link rel="manifest" href="./site.webmanifest">
  <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#000000">
  <link rel="shortcut icon" href="./favicon.ico">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="msapplication-config" content="./browserconfig.xml">
  <meta name="theme-color" content="#000000">

  <!-- Preconnects to improve performance -->
  <link rel="preconnect" href="https://pepegapi.jeanropke.net">
  <link rel="preconnect" href="https://jeanropke.b-cdn.net">
  <link rel="preconnect" href="https://s.rsg.sc">

  <!-- Preloads for certain UI elements -->
  <link rel="preload" as="image" href="./assets/images/action_indicator_clear.png">
  <link rel="preload" as="image" href="./assets/images/action_indicator_copy.png">
  <link rel="preload" as="image" href="./assets/images/action_indicator_external.png">
  <link rel="preload" as="image" href="./assets/images/action_indicator.png">
  <link rel="preload" as="image" href="./assets/images/arrow.png">
  <link rel="preload" as="image" href="./assets/images/fme_background.png">
  <link rel="preload" as="image" href="./assets/images/header_bg_center.png">
  <link rel="preload" as="image" href="./assets/images/header_border_divider.png">
  <link rel="preload" as="image" href="./assets/images/header_border_white.png">
  <link rel="preload" as="image" href="./assets/images/help_text_bg.png">
  <link rel="preload" as="image" href="./assets/images/menu_donate.png">
  <link rel="preload" as="image" href="./assets/images/modal_bg.png">
  <link rel="preload" as="image" href="./assets/images/moon.png">
  <link rel="preload" as="image" href="./assets/images/selection_boxes.png">
  <link rel="preload" as="image" href="./assets/images/sun.png">
  <link rel="preload" as="image" href="./assets/images/timer_bg.png">

  <link rel="stylesheet" href="assets/css/leaflet.css" />
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/css/styles.css?nocache=1581" />
  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1581" />

  <script>
    const nocache = 1581;
  </script>
</head>

<body>
  <div class="side-menu">
    <div id="top-sticky">
      <div class="sticky-container">
        <h2 id="main-header">
          <img id="main-header-left" src="./assets/images/header_bg_left.png" alt="">
          <div id="main-header-center">
            <span data-text="menu.collectables">Collectables</span>
            <h3 id="sub-header">
              <span class="cycle-date" data-help="cycle_date" dir="auto">Loading...</span>
              -
              <span class="collectables-counter" data-text="menu.collectables_counter" data-help="collectables_counter"
                dir="auto">Collected --- of ---</span>
              -
              <span id="items-value" data-help="items_value">$-.--</span>
            </h3>
          </div>
          <img id="main-header-right" src="./assets/images/header_bg_right.png" alt="">
        </h2>
      </div>
      <div class="scroller">
        <div class="scroller-grow">
          <img src="./assets/images/scroller/scroller_left_top.png" alt="">
          </div>
          <div class="scroller-stat">
            <img src="./assets/images/scroller/scroller_arrow_top.png" alt="" class="scroller-arrow-tp" style="display: none;">
            <img src="./assets/images/scroller/scroller_line_top.png" alt="" class="scroller-line-tp">
          </div>
          <div class="scroller-grow">
            <img src="./assets/images/scroller/scroller_right_top.png" alt="">
        </div>
      </div>
    </div>
    <div class="settings-container">
      <div class="input-container">
        <input class="input-search" type="text" id="search" placeholder="Search items. Separated by ;"
          autocomplete="off" data-help="search">
        <div id="clear-search" class="input-action-clear" data-help="search_clear"></div>
        <div id="copy-search-link" class="input-action-copy" data-help="search_copy_link"></div>
      </div>
    </div>
    <div id="cycle-changer-container" class="cycle-changer hidden">
      <div id="cycle-prev" class="input-selection-arrow"><img src="assets/images/selection_left.png" alt="arrow"></div>
      <span class="cycle-date">¯\_(ツ)_/¯</span>
      <div id="cycle-next" class="input-selection-arrow"><img src="assets/images/selection_right.png" alt="arrow"></div>
    </div>

    <div class="links-container">
      <a data-text="menu.hide_all" data-help="hide_all" href="javascript:void(0);">Hide all</a>
      <a data-text="menu.show_all" data-help="show_all" href="javascript:void(0);">Show all</a>
    </div>

    <div id="collection-insertion-before-point">
      <div class="menu-option clickable" data-type="random" data-help="item_category">
        <span>
          <img class="icon" src="./assets/images/icons/random.png" alt="Category icon" />
          <span class="menu-option-text" data-text="menu.random_spots">Random Spots</span>
        </span>
        <input class="input-text input-cycle random hidden" type="number" min="1" max="6" name="random" data-help="item_manual_cycle">
        <img class="cycle-icon random hidden" src="./assets/images/cycle_3.png" alt="Cycle 3" data-type="random">
      </div>
    </div>

    <div id="utilities-container">
      <h2 data-text="menu.utils">Utilities</h2>
      <div class="menu-option clickable" data-type="nazar" data-help="item_category">
        <span>
          <img class="icon" src="./assets/images/icons/nazar.png" alt="Category icon" />
          <span class="menu-option-text" data-text="menu.madam_nazar">Madam Nazar</span>
        </span>
      </div>
      <div class="menu-option clickable" data-type="fast_travel" data-help="item_category">
        <span>
          <img class="icon" src="./assets/images/icons/fast_travel.png" alt="Category icon" />
          <span class="menu-option-text" data-text="menu.fast_travel">Fast Travel</span>
        </span>
      </div>
      <div class="menu-option clickable" data-type="user_pins" data-help="item_category">
        <span>
          <img class="icon" src="./assets/images/icons/pins.png" alt="Category icon" />
          <span class="menu-option-text" data-text="menu.user_pins">User Pins</span>
        </span>
      </div>
      <a class="no-style" href="https://jeanropke.github.io/RDOMap/" target="_blank">
        <div class="menu-option">
          <span>
            <img class="icon" src="./assets/images/icons/random_encounter.png" alt="Category icon" />
            <span class="menu-option-text" data-text="menu.random_encounters">Random Encounters</span>
          </span>
        </div>
      </a>
      <div>
        <div class="menu-option clickable" data-type="treasure" data-help="item_category">
          <span>
            <img class="icon" src="./assets/images/icons/treasure.png" alt="Category icon" />
            <span class="menu-option-text" data-text="menu.treasures">Treasures</span>
          </span>
          <div class="open-submenu" style="margin: auto 0 auto auto;"></div>
        </div>
        <div class="menu-hidden two-column" data-type="treasure">
          <div class="collection-value">
            <a data-text="menu.hide_all" href="javascript:void(0);">Hide all</a>
            <a data-text="menu.show_all" href="javascript:void(0);">Show all</a>
          </div>
        </div>
      </div>
      <div>
        <div class="menu-option submenu-only" data-type="legendary_animals" data-help="item_category">
          <span>
            <img class="icon" src="./assets/images/icons/legendary_animals.png">
            <span data-text="menu.legendary_animals" style="color: #fdc607;">Legendary Animals</span>
          </span>
          <div class="open-submenu" style="margin: auto 0 auto auto;"></div>
        </div>
        <div class="menu-hidden two-column" data-type="legendary_animals">
          <div class="collection-value">
            <a data-text="menu.hide_all" href="javascript:void(0);">Hide all</a>
            <a data-text="menu.show_all" href="javascript:void(0);">Show all</a>
          </div>
        </div>
      </div>
    </div>

    <div class="header">
      <span class="header-border"></span>
      <h2 class="header-title" data-text="menu.settings">Settings</h2>
      <span class="header-border"></span>
    </div>
    <div class="settings-container">
      <div class="explain-text">
        <span data-text="menu.translate_body">Translations are made by the community for the community.</span>
        <span id="translation-progress"></span>
        <a data-text="menu.translate_link" href="https://translate.rdo.gg/" target="_blank"
          rel="noopener noreferrer">Help us by translating on Crowdin.</a>
      </div>
      <hr class="menu-divider">
      <div class="input-container" data-help="language">
        <label for="language" data-text="menu.language">Language</label>
        <select class="input-text wide-select-menu" id="language">
          <option value="en" selected>English</option>
          <option value="af">Afrikaans (Afrikaans)</option>
          <option value="ar">ٱلْعَرَبِيَّة (Arabic)</option>
          <option value="ca">Català (Catalan)</option>
          <option value="cs">Нохчийн мотт (Chech)</option>
          <option value="da">Dansk (Danish)</option>
          <option value="de">Deutsch (German)</option>
          <option value="el">ελληνικά (Greek)</option>
          <option value="en-GB">English (UK)</option>
          <option value="es">Español (Spanish)</option>
          <option value="es-MX">Español (Mexican Spanish)</option>
          <option value="fi">Suomi (Finnish)</option>
          <option value="fr">Français (French)</option>
          <option value="he">עברית (Hebrew)</option>
          <option value="hu">Magyar (Hungarian)</option>
          <option value="it">Italiano (Italian)</option>
          <option value="ja">日本語 (Japanese)</option>
          <option value="ko">한국어 (Korean)</option>
          <option value="nl">Nederlands (Dutch)</option>
          <option value="no">Norsk (Norwegian)</option>
          <option value="pl">Polski (Polish)</option>
          <option value="pt">Português (Portuguese)</option>
          <option value="pt-BR">Português (Brazilian Portuguese)</option>
          <option value="ro">Limba română (Romanian)</option>
          <option value="ru">Русский язык (Russian)</option>
          <option value="sr">Српски (Serbian)</option>
          <option value="sv">Svenska (Swedish)</option>
          <option value="th">ภาษาไทย (Thai)</option>
          <option value="tr">Türkçe (Turkish)</option>
          <option value="uk">Українська мова (Ukrainian)</option>
          <option value="vi">Tiếng Việt (Vietnamese)</option>
          <option value="zh-Hans">简体中文 (Chinese Simplified)</option>
          <option value="zh-Hant">繁体中文 (Chinese Traditional)</option>
        </select>
      </div>
      <div class="input-container" data-help="tooltip_map">
        <label for="tooltip-map" data-text="menu.tooltip_map">Tooltips for map items</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="tooltip-map" value="1" id="tooltip-map">
          <label class="input-checkbox-label" for="tooltip-map"></label>
        </div>
      </div>
      <hr class="menu-divider">
      <div class="input-container" data-help="tool_type">
        <label for="tools" data-text="menu.tool_type">Tool type</label>
        <select class="input-text wide-select-menu" id="tools">
          <option value="3" data-text="menu.tool_type.all" selected>All</option>
          <option value="2" data-text="menu.tool_type.metal_detector">Metal detector</option>
          <option value="1" data-text="menu.tool_type.shovel">Shovel</option>
          <option value="0" data-text="menu.tool_type.no_tools">No tools</option>
          <option disabled>------------</option>
          <option value="-1" data-text="menu.tool_type.shovel_only">Shovel only</option>
          <option value="-2" data-text="menu.tool_type.metal_detector_only">Metal detector only</option>
        </select>
      </div>
      <div class="input-container" data-help="filter_type">
        <label for="filter-type" data-text="menu.filter_type">Filter type</label>
        <select class="input-text wide-select-menu" id="filter-type">
          <option value="none" data-text="menu.filter_type.none">No filter</option>
          <option value="moonshiner" data-text="menu.filter_type.moonshiner">Moonshiner</option>
          <option value="naturalist" data-text="menu.filter_type.naturalist">Naturalist</option>
          <option value="weekly" data-text="menu.filter_type.weekly_set">Weekly set</option>
          <option value="important" data-text="menu.filter_type.important_items">Important items</option>
          <option value="static" data-text="menu.filter_type.only_static">Only static</option>
          <option value="hideFlowers" data-text="menu.filter_type.hide_flowers">Hide no ingredients flowers</option>
          <option value="coinsSpots" data-text="menu.filter_type.all_coins_spots">All possible coins spots</option>
          <option value="lowInventoryItems" data-text="menu.filter_type.low_amount_items">Low amount items</option>
        </select>
      </div>
      <div class="input-container" data-help="filter_min_amount_items">
        <label for="filter-min-amount-items" data-text="menu.filter_min_amount_items">Show items with amount less than</label>
        <input id="filter-min-amount-items" class="input-text narrow-select-menu" type="number" min="1" max="10"
          value="10">
      </div>
      <div class="input-container" data-help="reset_markers_daily">
        <label for="reset-markers" data-text="menu.reset_markers_daily">Reset markers daily</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="reset-markers" value="1" id="reset-markers" />
          <label class="input-checkbox-label" for="reset-markers"></label>
        </div>
      </div>
      <div id="open-clear-markers-modal" class="input-container clickable" data-help="clear_markers">
        <label data-text="menu.clear_markers">Reset markers now</label>
        <div class="input-action"></div>
      </div>
      <div id="open-clear-important-items-modal" class="input-container clickable" data-help="clear_important_items">
        <label data-text="menu.clear_important_items">Clear important markers</label>
        <div class="input-action"></div>
      </div>
      <hr class="menu-divider">
      <div class="input-container" data-help="fme_display">
        <label for="fme-display" data-text="menu.fme_display">Show Freeroam Events</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="fme-display" value="1" id="fme-display" />
          <label class="input-checkbox-label" for="fme-display"></label>
        </div>
      </div>
      <div class="input-container" data-help="fme_display_general_period">
        <label for="fme-display-general-period" data-text="menu.fme_display_general_period">General Event display
          period</label>
        <input id="fme-display-general-period" class="input-text narrow-select-menu" type="number" min="10" max="45"
          value="90">
      </div>
      <div class="input-container" data-help="fme_display_role_period">
        <label for="fme-display-role-period" data-text="menu.fme_display_role_period">Role Event display period</label>
        <input id="fme-display-role-period" class="input-text narrow-select-menu" type="number" min="10" max="90"
          value="90">
      </div>
      <div class="input-container" data-help="fme_notification">
        <label for="fme-notification" data-text="menu.fme_notification">Enable event notifications</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="fme-notification" value="1" id="fme-notification" />
          <label class="input-checkbox-label" for="fme-notification"></label>
        </div>
      </div>
      <div class="input-container" data-help="fme_notification_period">
        <label for="fme-notification-period" data-text="menu.fme_notification_period">Event notification period</label>
        <input id="fme-notification-period" class="input-text narrow-select-menu" type="number" min="1" max="30"
          value="10">
      </div>
      <div id="open-fme-enabled-events-modal" class="input-container clickable" data-help="fme_enabled_events">
        <label data-text="menu.fme_enabled_events">Select enabled events</label>
        <div class="input-action"></div>
      </div>
      <hr class="menu-divider">
      <div class="input-container" data-help="user_pins_place_mode">
        <label for="pins-place-mode" data-text="menu.user_pins_place_mode">Create new pin on click</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="pins-place-mode" value="1" id="pins-place-mode" />
          <label class="input-checkbox-label" for="pins-place-mode"></label>
        </div>
      </div>
      <div class="input-container" data-help="user_pins_edit_mode">
        <label for="pins-edit-mode" data-text="menu.user_pins_edit_mode">Enable pin editing</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="pins-edit-mode" value="1" id="pins-edit-mode" />
          <label class="input-checkbox-label" for="pins-edit-mode"></label>
        </div>
      </div>
      <div id="pins-place-new" class="input-container clickable" data-help="pins_place_new">
        <label data-text="menu.user_pins_place_new">Create new pin now</label>
        <div class="input-action"></div>
      </div>
      <div id="open-remove-all-pins-modal" class="input-container clickable text-danger" data-help="remove_all_pins">
        <label data-text="menu.remove_all_pins">Remove all pins</label>
        <div class="input-action"></div>
      </div>
      <hr class="menu-divider">
      <div class="input-container" data-help="enable_inventory">
        <label for="enable-inventory" data-text="menu.enable_inventory">Enable inventory</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="enable-inventory" value="1" id="enable-inventory" />
          <label class="input-checkbox-label" for="enable-inventory"></label>
        </div>
      </div>
      <div id="inventory-container">
        <div class="input-container" data-help="enable_inventory_popups">
          <label for="enable-inventory-popups" data-text="menu.enable_inventory_popups">Enable inventory in
            popups</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-inventory-popups" value="1"
              id="enable-inventory-popups" />
            <label class="input-checkbox-label" for="enable-inventory-popups"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_inventory_menu_update">
          <label for="enable-inventory-menu-update" data-text="menu.enable_inventory_menu_update">Toggling menu items
            updates inventory</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-inventory-menu-update" value="1"
              id="enable-inventory-menu-update" />
            <label class="input-checkbox-label" for="enable-inventory-menu-update"></label>
          </div>
        </div>
        <div class="input-container" data-help="auto_enable_sold_items">
          <label for="auto-enable-sold-items" data-text="menu.auto_enable_sold_items">Automatically enable sold
            items</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="auto-enable-sold-items" value="0"
              id="auto-enable-sold-items" />
            <label class="input-checkbox-label" for="auto-enable-sold-items"></label>
          </div>
        </div>
        <div class="input-container" data-help="inventory_stack">
          <label for="inventory-stack" data-text="menu.inventory_stack">Item stack size</label>
          <input id="inventory-stack" class="input-text narrow-select-menu" type="number" min="1" max="10" value="10">
        </div>
        <div class="input-container" data-help="reset_inventory_daily">
          <label for="reset-inventory-daily" data-text="menu.reset_inventory_daily">Reset inventory daily</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="reset-inventory-daily" value="0"
              id="reset-inventory-daily" />
            <label class="input-checkbox-label" for="reset-inventory-daily"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_additional_inventory_options">
          <label for="enable-additional-inventory-options" data-text="menu.enable_additional_inventory_options">Enable
            advanced inventory options</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-additional-inventory-options" value="0"
              id="enable-additional-inventory-options" />
            <label class="input-checkbox-label" for="enable-additional-inventory-options"></label>
          </div>
        </div>
        <div id="disable-all-collected-items" class="input-container clickable" data-help="disable_collected_items">
          <label data-text="menu.disable_all_collected_items">Disable collected items</label>
          <div class="input-action"></div>
        </div>
        <div id="open-clear-inventory-modal" class="input-container clickable text-danger" data-help="clear_inventory">
          <label data-text="menu.clear_inventory">Clear inventory</label>
          <div class="input-action"></div>
        </div>
        <div class="input-container" data-help="highlight_low_amount_items">
          <label for="highlight_low_amount_items" data-text="menu.highlight_low_amount_items">Highlight low amount
            items</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="highlight_low_amount_items" value="0"
              id="highlight_low_amount_items" />
            <label class="input-checkbox-label" for="highlight_low_amount_items"></label>
          </div>
        </div>
        <div class="input-container clickable disabled" data-help="highlight_style">
          <label for="highlight_style" data-text="menu.highlight_style">Highlight style</label>
          <select class="input-text wide-select-menu" id="highlight_style">
            <option data-text="menu.highlight_style.static">Static</option>
            <option data-text="menu.highlight_style.animated">Animated</option>
          </select>
        </div>
        <div id="open-import-rdo-inventory-modal" class="input-container clickable" data-help="import_rdo_inventory">
          <label data-text="menu.import_rdo_inventory">Import RDO inventory</label>
          <div class="input-action"></div>
        </div>
      </div>
      <hr class="menu-divider">
      <div class="input-container" data-help="show_weekly">
        <label for="show-weekly" data-text="menu.show_weekly">Show weekly collection</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="show-weekly" value="1" id="show-weekly" />
          <label class="input-checkbox-label" for="show-weekly"></label>
        </div>
      </div>
      <div class="input-container" data-help="show_utilities">
        <label for="show-utilities" data-text="menu.show_utilities">Show utility settings</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="show-utilities" value="1" id="show-utilities" />
          <label class="input-checkbox-label" for="show-utilities"></label>
        </div>
      </div>
      <div class="input-container" data-help="show_customization">
        <label for="show-customization" data-text="menu.show_customization">Show customization settings</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="show-customization" value="1" id="show-customization" />
          <label class="input-checkbox-label" for="show-customization"></label>
        </div>
      </div>
      <div class="input-container" data-help="show_routes">
        <label for="show-routes" data-text="menu.show_routes">Show routes settings</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="show-routes" value="1" id="show-routes" />
          <label class="input-checkbox-label" for="show-routes"></label>
        </div>
      </div>
      <div class="input-container" data-help="show_import_export">
        <label for="show-import-export" data-text="menu.show_import_export">Show import/export settings</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="show-import-export" value="1" id="show-import-export" />
          <label class="input-checkbox-label" for="show-import-export"></label>
        </div>
      </div>
      <div class="input-container" data-help="show_debug">
        <label for="show-debug" data-text="menu.show_debug">Show debug settings</label>
        <div class="input-checkbox-wrapper">
          <input class="input-checkbox" type="checkbox" name="show-debug" value="1" id="show-debug" />
          <label class="input-checkbox-label" for="show-debug"></label>
        </div>
      </div>
      <hr class="menu-divider">
      <div id="reload-map" class="input-container clickable" data-help="reload_map">
        <label data-text="menu.reload_map">Reload the map now</label>
        <div class="input-action"></div>
      </div>
      <div id="open-delete-all-settings-modal" class="input-container clickable text-danger"
        data-help="delete_all_settings">
        <label data-text="menu.delete_all_settings">Reset all settings</label>
        <div class="input-action"></div>
      </div>
    </div>

    <div id="customization-container">
      <div class="header">
        <span class="header-border"></span>
        <h2 class="header-title" data-text="menu.customization_title">Customization</h2>
        <span class="header-border"></span>
      </div>
      <div class="settings-container">
        <div class="input-container" data-help="sort_items_alphabetically">
          <label for="sort-items-alphabetically" data-text="menu.sort_items_alphabetically">Sort items
            alphabetically</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="sort-items-alphabetically" value="1"
              id="sort-items-alphabetically" />
            <label class="input-checkbox-label" for="sort-items-alphabetically"></label>
          </div>
        </div>
        <div class="input-container" data-help="marker_color">
          <label for="marker-color" data-text="menu.marker_color.header">Marker colors</label>
          <select class="input-text wide-select-menu" id="marker-color">
            <option data-text="menu.marker_color.by_cycle">By cycle</option>
            <option data-text="menu.marker_color.by_category">By category</option>
            <option disabled>------------</option>
            <option data-text="menu.marker_color.custom">Custom</option>
            <option disabled>------------</option>
            <option data-text="menu.marker_color.auto_orange_darkblue">auto orange/darkblue</option>
            <option disabled>------------</option>
            <option data-text="generic.blue">Blue</option>
            <option data-text="generic.orange">Orange</option>
            <option data-text="generic.purple">Purple</option>
            <option data-text="generic.darkpurple">Dark purple</option>
            <option data-text="generic.darkred">Dark red</option>
            <option data-text="generic.darkblue">Dark blue</option>
          </select>
        </div>

        <div id="open-custom-marker-color-modal" class="input-container clickable" data-help="custom_marker_color_modal">
          <label data-text="menu.custom_marker_color">Select custom colors</label>
          <div class="input-action"></div>
        </div>

        <hr class="menu-divider">
        <div class="input-container" data-help="overlay_opacity">
          <label for="overlay-opacity" data-text="menu.overlay_opacity">Overlay opacity</label>
          <select class="input-text wide-select-menu" id="overlay-opacity">
            <option value="0" data-text="menu.overlay_opacity.0">Disabled</option>
            <option value="0.25" data-text="menu.overlay_opacity.25">25%</option>
            <option value="0.5" data-text="menu.overlay_opacity.50">50%</option>
            <option value="0.75" data-text="menu.overlay_opacity.75" selected>75%</option>
            <option value="1" data-text="menu.overlay_opacity.100" selected>Opaque</option>
          </select>
        </div>
        <div class="input-container" data-help="marker_size">
          <label for="marker-size" data-text="menu.marker_size">Marker size</label>
          <select class="input-text wide-select-menu" id="marker-size">
            <option value="0.7" data-text="menu.marker_size.70">70%</option>
            <option value="0.8" data-text="menu.marker_size.80">80%</option>
            <option value="0.9" data-text="menu.marker_size.90">90%</option>
            <option value="1" data-text="menu.marker_size.100" selected>100%</option>
            <option value="1.25" data-text="menu.marker_size.125">125%</option>
            <option value="1.5" data-text="menu.marker_size.150">150%</option>
            <option value="1.75" data-text="menu.marker_size.175">175%</option>
            <option value="2" data-text="menu.marker_size.200">200%</option>
          </select>
        </div>
        <div class="input-container" data-help="marker_opacity">
          <label for="marker-opacity" data-text="menu.marker_opacity">Marker opacity</label>
          <select class="input-text wide-select-menu" id="marker-opacity">
            <option value="0.2" data-text="menu.marker_opacity.20">20%</option>
            <option value="0.4" data-text="menu.marker_opacity.40">40%</option>
            <option value="0.6" data-text="menu.marker_opacity.60">60%</option>
            <option value="0.8" data-text="menu.marker_opacity.80" selected>80%</option>
            <option value="1" data-text="menu.marker_opacity.100" selected>Opaque</option>
          </select>
        </div>
        <div class="input-container" data-help="marker_cluster">
          <label for="marker-cluster" data-text="menu.marker_cluster">Markers cluster</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="marker-cluster" value="1" id="marker-cluster" />
            <label class="input-checkbox-label" for="marker-cluster"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_marker_shadows">
          <label for="enable-marker-shadows" data-text="menu.enable_marker_shadows">Marker shadows enabled</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-marker-shadows" value="1"
              id="enable-marker-shadows" />
            <label class="input-checkbox-label" for="enable-marker-shadows"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_marker_popups">
          <label for="enable-marker-popups" data-text="menu.enable_marker_popups">Marker popups enabled</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-marker-popups" value="1"
              id="enable-marker-popups" />
            <label class="input-checkbox-label" for="enable-marker-popups"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_marker_popups_hover">
          <label for="enable-marker-popups-hover" data-text="menu.enable_marker_popups_hover">Open marker popups on
            hover</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-marker-popups-hover" value="1"
              id="enable-marker-popups-hover" />
            <label class="input-checkbox-label" for="enable-marker-popups-hover"></label>
          </div>
        </div>
        <hr class="menu-divider">
        <div class="input-container" data-help="enable_legendary_backgrounds">
          <label for="enable-legendary-backgrounds" data-text="menu.enable_legendary_backgrounds">Legendary Animal backgrounds enabled</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-legendary-backgrounds" value="1"
              id="enable-legendary-backgrounds" />
            <label class="input-checkbox-label" for="enable-legendary-backgrounds"></label>
          </div>
        </div>
        <div class="input-container" data-help="legendary_marker_type">
          <label for="legendary-marker-type" data-text="menu.legendary_animal_marker_type">Legendary animals marker type</label>
          <select class="input-text narrow-select-menu" id="legendary-animal-marker-type">
            <option value="head" data-text="menu.legendary_icon_type.head" selected>Animal heads</option>
            <option value="footprint" data-text="menu.legendary_icon_type.paw_prints">Animal paw prints</option>
          </select>
        </div>
        <div class="input-container" data-help="legendary_marker_size">
          <label for="legendary-animal-marker-size" data-text="menu.legendary_animal_marker_size">Legendary animals marker size</label>
          <select class="input-text narrow-select-menu" id="legendary-animal-marker-size">
            <option value="0.7" data-text="menu.marker_size.70">70%</option>
            <option value="0.8" data-text="menu.marker_size.80">80%</option>
            <option value="0.9" data-text="menu.marker_size.90">90%</option>
            <option value="1" data-text="menu.marker_size.100" selected>100%</option>
            <option value="1.25" data-text="menu.marker_size.125">125%</option>
            <option value="1.5" data-text="menu.marker_size.150">150%</option>
            <option value="1.75" data-text="menu.marker_size.175">175%</option>
            <option value="2" data-text="menu.marker_size.200">200%</option>
          </select>
        </div>
        <hr class="menu-divider">
        <div class="input-container" data-help="enable_dclick_zoom">
          <label for="enable-dclick-zoom" data-text="menu.enable_dclick_zoom">Double-click to zoom in</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-dclick-zoom" value="1" id="enable-dclick-zoom" />
            <label class="input-checkbox-label" for="enable-dclick-zoom"></label>
          </div>
        </div>
        <div class="input-container" data-help="show_help">
          <label for="show-help" data-text="menu.show_help">Show help on hover</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="show-help" value="1" id="show-help" />
            <label class="input-checkbox-label" for="show-help"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_cycles">
          <label for="enable-cycles" data-text="menu.enable_cycles">Enable cycles display</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-cycles" value="1" id="enable-cycles" />
            <label class="input-checkbox-label" for="enable-cycles"></label>
          </div>
        </div>
        <div class="input-container" data-help="enable_cycle_input">
          <label for="enable-cycle-input" data-text="menu.enable_cycle_input">Enable manual cycle input</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-cycle-input" value="1" id="enable-cycle-input" />
            <label class="input-checkbox-label" for="enable-cycle-input"></label>
          </div>
        </div>
        <div class="input-container" data-help="show_coords">
          <label for="show-coordinates" data-text="menu.show_coords">Show coordinates on click</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="show-coordinates" value="1" id="show-coordinates" />
            <label class="input-checkbox-label" for="show-coordinates"></label>
          </div>
        </div>
        <div class="input-container" data-help="map_boundaries">
          <label for="map-boundaries" data-text="menu.map_boundaries">Map boundaries enabled</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="map-boundaries" value="1" id="map-boundaries" />
            <label class="input-checkbox-label" for="map-boundaries"></label>
          </div>
        </div>
        <hr class="menu-divider">
        <div class="input-container" data-help="timestamps_24">
          <label for="timestamps-24" data-text="menu.timestamps_24">Clock in 24-hour format</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="timestamps-24" value="0" id="timestamps-24" />
            <label class="input-checkbox-label" for="timestamps-24"></label>
          </div>
        </div>
      </div>
    </div>
    <div id="routes-container">
      <div class="header">
        <span class="header-border"></span>
        <h2 class="header-title">
          <span data-text="menu.route_generator">Route generator</span>
        </h2>
        <span class="header-border"></span>
      </div>
      <div class="settings-container">
        <div class="input-container-noflex">
          <button class="btn btn-default" onclick="Routes.generatePath(true)" data-text="menu.generate_route"
            data-help="generate_route">Generate route</button>
          <button class="btn btn-default" onclick="Routes.clearPath()" data-text="menu.generate_route_clear"
            data-help="generate_route_clear">Clear route</button>
        </div>
        <hr class="menu-divider">
        <div class="input-container" data-help="generate_route_use_pathfinder">
          <label for="generate-route-use-pathfinder" data-text="menu.generate_route_use_pathfinder">Use path finder (slower)</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="generate-route-use-pathfinder" value="1"
              id="generate-route-use-pathfinder" />
            <label class="input-checkbox-label" for="generate-route-use-pathfinder"></label>
          </div>
        </div>
        <div class="input-container" data-help="generate_route_generate_on_visit">
          <label for="generate-route-generate-on-visit" data-text="menu.generate_route_generate_on_visit">Generate route
            on page visit</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="generate-route-generate-on-visit" value="1"
              id="generate-route-generate-on-visit" />
            <label class="input-checkbox-label" for="generate-route-generate-on-visit"></label>
          </div>
        </div>
        <div class="input-container" data-help="generate_route_ignore_collected">
          <label for="generate-route-ignore-collected" data-text="menu.generate_route_ignore_collected">Ignore collected
            items</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="generate-route-ignore-collected" value="1"
              id="generate-route-ignore-collected" />
            <label class="input-checkbox-label" for="generate-route-ignore-collected"></label>
          </div>
        </div>
        <div class="input-container" data-help="generate_route_important_only">
          <label for="generate-route-important-only" data-text="menu.generate_route_important_only">Only items marked
            as important</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="generate-route-important-only" value="1"
              id="generate-route-important-only" />
            <label class="input-checkbox-label" for="generate-route-important-only"></label>
          </div>
        </div>
        <div class="input-container" data-help="generate_route_auto_update">
          <label for="generate-route-auto-update" data-text="menu.generate_route_auto_update">Automatically update
            route</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="generate-route-auto-update" value="1"
              id="generate-route-auto-update" />
            <label class="input-checkbox-label" for="generate-route-auto-update"></label>
          </div>
        </div>
        <div class="input-container" data-help="generate_route_fasttravel_weight">
          <label for="generate-route-fasttravel-weight" data-text="menu.generate_route_fasttravel_weight">Fast travel
            preference</label>
          <select class="input-text wide-select-menu" id="generate-route-fasttravel-weight">
            <option value="Infinity" data-text="menu.generate_route_weight.Infinity">Don't use</option>
            <option value="1.5" data-text="menu.generate_route_weight.1.5">Very long distances</option>
            <option value="1.1" data-text="menu.generate_route_weight.1.1">Long distances</option>
            <option value="1" data-text="menu.generate_route_weight.1">Same as roads</option>
          </select>
        </div>
        <div class="input-container" data-help="generate_route_railroad_weight">
          <label for="generate-route-railroad-weight" data-text="menu.generate_route_railroad_weight">Railroads
            preference</label>
          <select class="input-text wide-select-menu" id="generate-route-railroad-weight">
            <option value="2" data-text="menu.generate_route_weight.2">Only necessarily</option>
            <option value="1.5" data-text="menu.generate_route_weight.1.5">Very long distances</option>
            <option value="1.1" data-text="menu.generate_route_weight.1.1">Long distances</option>
            <option value="1" data-text="menu.generate_route_weight.1">Same as roads</option>
            <option value="0.9" data-text="menu.generate_route_weight.0.9">Prefer over roads</option>
            <option value="0.5" data-text="menu.generate_route_weight.0.5">Highly prefer over roads</option>
          </select>
        </div>
        <div class="input-container" data-help="generate_route_distance">
          <label for="generate-route-distance" data-text="menu.generate_route_distance">Maximum line length</label>
          <input id="generate-route-distance" class="input-text narrow-select-menu" type="number" min="1" max="200"
            value="25">
        </div>
        <div class="input-container" data-help="generate_route_start">
          <label for="generate-route-start" data-text="menu.generate_route_start">Route starts at</label>
          <select class="input-text wide-select-menu" id="generate-route-start">
            <option value="SW" data-text="menu.generate_route_start.sw">Southwest (↙)</option>
            <option value="NE" data-text="menu.generate_route_start.ne">Northeast (↗)</option>
            <option value="N" data-text="menu.generate_route_start.n">North (↑)</option>
            <option value="SE" data-text="menu.generate_route_start.se">Southeast (↘)</option>
            <option value="Custom" data-text="menu.generate_route_start.custom">Custom</option>
          </select>
        </div>
        <div class="input-container" data-help="generate_route_start_custom">
          <label for="generate-route-start-lat" data-text="menu.generate_route_start_lat">Route start lat.</label>
          <input id="generate-route-start-lat" class="input-text wide-select-menu" type="number" step="any"
            value="-119.9063">
        </div>
        <div class="input-container" data-help="generate_route_start_custom">
          <label for="generate-route-start-lng" data-text="menu.generate_route_start_lng">Route start long.</label>
          <input id="generate-route-start-lng" class="input-text wide-select-menu" type="number" step="any"
            value="8.0313">
        </div>
      </div>

      <div class="header">
        <span class="header-border"></span>
        <h2 class="header-title" data-text="menu.custom_routes">Custom routes</h2>
        <span class="header-border"></span>
      </div>
      <div class="settings-container">
        <div class="input-container" data-help="enable_custom_route">
          <label for="custom-routes" data-text="menu.enable_custom_route">Enable custom route</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="custom-routes" value="1" id="custom-routes" />
            <label class="input-checkbox-label" for="custom-routes"></label>
          </div>
        </div>
        <div id="open-clear-routes-modal" class="input-container clickable" data-help="clear_custom_routes">
          <label data-text="menu.clear_custom_routes">Clear custom route</label>
          <div class="input-action"></div>
        </div>
        <hr class="menu-divider">
        <div class="input-container-noflex">
          <button class="btn btn-default" data-text="menu.import_route" data-help="import_route"
            onclick="Routes.importCustomRoute()">Import route</button>
          <button class="btn btn-default" data-text="menu.export_route" data-help="export_route"
            onclick="Routes.exportCustomRoute()">Export route</button>
        </div>
      </div>
    </div>

    <div id="import-export-container">
      <div class="header">
        <span class="header-border"></span>
        <h2 class="header-title" data-text="menu.import_export_title">Import/Export</h2>
        <span class="header-border"></span>
      </div>
      <div class="settings-container">
        <div class="input-container-noflex">
          <h4 class="no-margin-top" data-text="menu.settings_import_export_title">Settings</h4>
        </div>
        <div class="input-container-noflex">
          <p class="explain-text" data-text="menu.import_export_explanation">
            This will import or export your settings.
            Importing settings will replace all current settings and reload the page.
            This feature does not include pins.
          </p>
        </div>
        <div class="input-container-noflex" data-help="cookie_import_file">
          <input id="cookie-import-file" type="file" class="input-file" accept=".json" autocomplete="off">
        </div>
        <div class="input-container-noflex">
          <button id="cookie-import" type="button" class="btn btn-default narrow-select-menu"
            data-text="menu.import_button" data-help="cookie_import">Import</button>
          <button id="cookie-export" type="button" class="btn btn-default narrow-select-menu"
            data-text="menu.export_button" data-help="cookie_export">Export</button>
        </div>
        <div class="input-container-noflex">
          <h4 data-text="menu.pins_import_export_title">User Pins</h4>
        </div>
        <div class="input-container-noflex">
          <p class="explain-text" data-text="menu.pins_import_export_explanation">
            This will import or export your pins. Importing pins will replace all current pins.
          </p>
        </div>
        <div class="input-container-noflex" data-help="pins_import_file">
          <input id="pins-import-file" type="file" class="input-file" accept=".txt" autocomplete="off">
        </div>
        <div class="input-container-noflex">
          <button id="pins-import" type="button" class="btn btn-default narrow-select-menu"
            data-text="menu.user_pins_import" data-help="user_pins_import">Import</button>
          <button id="pins-export" type="button" class="btn btn-default narrow-select-menu"
            data-text="menu.user_pins_export" data-help="user_pins_export">Export</button>
        </div>
      </div>
    </div>

    <div id="debug-container">
      <div class="header">
        <span class="header-border"></span>
        <h2 class="header-title">Debug</h2>
        <span class="header-border"></span>
      </div>
      <div class="settings-container">
        <div class="input-container-noflex">
          <p class="explain-text">
            These settings will not be saved. These settings are for development purposes and should not be used by
            regular users.
          </p>
        </div>
        <div class="input-container">
          <label for="enable-debug">Enable debug features</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-debug" value="1" id="enable-debug" />
            <label class="input-checkbox-label" for="enable-debug"></label>
          </div>
        </div>
        <div class="input-container">
          <label for="enable-cycle-changer">Enable day cycle changer</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-cycle-changer" value="1"
              id="enable-cycle-changer" />
            <label class="input-checkbox-label" for="enable-cycle-changer"></label>
          </div>
        </div>
        <div class="input-container">
          <label for="enable-right-click">Enable context menus</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="enable-right-click" value="1" id="enable-right-click" />
            <label class="input-checkbox-label" for="enable-right-click"></label>
          </div>
        </div>
        <div class="input-container">
          <label for="show-all-markers">Show all markers</label>
          <div class="input-checkbox-wrapper">
            <input class="input-checkbox" type="checkbox" name="show-all-markers" value="1" id="show-all-markers" />
            <label class="input-checkbox-label" for="show-all-markers"></label>
          </div>
        </div>
      </div>
    </div>

    <div class="header">
      <span class="header-border"></span>
      <h2 class="header-title" data-text="menu.information_links">Links/Information</h2>
      <span class="header-border"></span>
    </div>
    <div class="settings-container">
      <div id="open-updates-modal" class="input-container clickable" data-help="show_updates">
        <label data-text="menu.show_updates">Show the latest updates</label>
        <div class="input-action"></div>
      </div>
      <a class="no-style" href="https://jeanropke.github.io/RDOMap/" target="_blank">
        <div class="input-container clickable" data-help="rdo_map">
          <label data-text="menu.rdo_map">RDO Map</label>
          <div class="input-action external"></div>
        </div>
      </a>
      <a class="no-style wiki-page"
        href="https://github.com/jeanropke/RDR2CollectorsMap/wiki/RDO-Collectors-Map-User-Guide-(English)"
        target="_blank">
        <div class="input-container clickable" data-help="read_wiki">
          <label data-text="menu.read_wiki">Read this map's Wiki</label>
          <div class="input-action external"></div>
        </div>
      </a>
      <a class="no-style" href="https://github.com/jeanropke/RDR2CollectorsMap/issues" target="_blank">
        <div class="input-container clickable" data-help="report_issues">
          <label data-text="menu.report_issues">Report issues here</label>
          <div class="input-action external"></div>
        </div>
      </a>
      <a class="no-style" href="https://discord.com/invite/eRPCBDy" target="_blank">
        <div class="input-container clickable" data-help="join_discord">
          <label data-text="menu.join_discord">Join our Discord</label>
          <div class="input-action external"></div>
        </div>
      </a>
      <form class="donate-form" data-help="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post"
        target="_blank">
        <input type="hidden" name="cmd" value="_donations" />
        <input type="hidden" name="business" value="X3A9DHBPW3B2A" />
        <input type="hidden" name="lc" value="en_US" />

        <input type="image" src="./assets/images/donate.png" border="0" name="submit" title="Donate with PayPal"
          alt="Donate with PayPal button" />
        <select class="input-text" name="currency_code">
          <option value="AUD">AUD $</option>
          <option value="BRL">BRL R$</option>
          <option value="CAD">CAD $</option>
          <option value="CHF">CHF Fr.</option>
          <option value="CZK">CZK Kč</option>
          <option value="DKK">DKK kr.</option>
          <option value="EUR">EUR €</option>
          <option value="GBP">GBP £</option>
          <option value="HKD">HKD $</option>
          <option value="HUF">HUF Ft</option>
          <option value="ILS">ILS ₪</option>
          <option value="JPY">JPY ‎¥‎</option>
          <option value="MXN">‎MXN $‎</option>
          <option value="MYR">MYR RM</option>
          <option value="NOK">NOK kr</option>
          <option value="NZD">NZD $</option>
          <option value="PHP">‎PHP ₱</option>
          <option value="PLN">PLN gr</option>
          <option value="RUB">RUB ₽</option>
          <option value="SEK">SEK kr</option>
          <option value="SGD">SGD $</option>
          <option value="THB">THB ฿</option>
          <option value="TWD">TWD $</option>
          <option value="USD" selected>USD $</option>
        </select>
      </form>
      <hr class="menu-divider">
      <div class="input-container-noflex">
        <h4 class="no-margin-top" data-text="menu.sponsors">Sponsors</h4>
      </div>
      <a class="no-style" href="https://crowdin.com/?utm_source=badge&utm_medium=referral&utm_campaign=badge-add-on" rel="nofollow" target="_blank">
        <div class="input-container clickable" style="align-items: center;">
          <label>Crowdin</label>
          <img style="width:140;height:40px;opacity:0.8;" src="https://badges.crowdin.net/badge/light/crowdin-on-dark.png" srcset="https://badges.crowdin.net/badge/light/crowdin-on-dark.png 1x,https://badges.crowdin.net/badge/light/crowdin-on-dark@2x.png 2x" alt="Crowdin | Agile localization for tech companies" />
        </div>
      </a>
      <a class="no-style" href="https://sentry.io/welcome/" rel="nofollow" target="_blank">
        <div class="input-container clickable" style="align-items: center;">
          <label>Sentry</label>
          <svg style="width:135;height:40px;background-color: rgb(204, 204, 204);border-radius:5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 66" width="135" height="40"><path d="M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z" transform="translate(11, 11)" fill="#362d59"></path></svg>
        </div>
      </a>
    </div>

    <div id="bottom-sticky">
      <div class="scroller">
        <div class="scroller-grow">
          <img src="./assets/images/scroller/scroller_left_bottom.png" alt="">
        </div>
        <div class="scroller-stat">
          <img src="./assets/images/scroller/scroller_arrow_bottom.png" alt="" class="scroller-arrow-bt">
          <img src="./assets/images/scroller/scroller_line_bottom.png" alt="" class="scroller-line-bt" style="display: none;">
        </div>
        <div class="scroller-grow">
          <img src="./assets/images/scroller/scroller_right_bottom.png" alt="">
        </div>
      </div>
      <div class="sticky-container">
        <div id="help-container">
          <p data-text="help.default">Hover over any setting to get an explanation about it.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="menu-toggle">></div>

  <div class="top-widget">
    <p id="countdown" data-help="cycle_change_countdown">--:--:--</p>
    <p id="time-in-game" class="hidden" data-help="clock_in_game">--:-- --</p>
    <p id="item-counter" class="hidden" data-help="collectables_counter">-- of --</p>
    <p id="item-counter-percentage" class="hidden" data-help="collectables_counter">-.--%</p>
    <img id="day-cycle" class="hidden" data-help="sun_moon_indicator" src="#" alt="Daylight indicator">
  </div>

  <div id="fme-container" style="display: none;">
    <div id="next-general-event" class="fme-card">
      <img class="fme-image" id="next-general-image" />
      <div class="fme-body">
        <h3 class="fme-title" id="next-general-name"></h3>
        <p class="fme-text" id="next-general-eta"></p>
      </div>
      <span id="next-general-mobile"></span>
    </div>
    <div id="next-role-event" class="fme-card">
      <img class="fme-image" id="next-role-image" />
      <div class="fme-body">
        <h3 class="fme-title" id="next-role-name"></h3>
        <p class="fme-text" id="next-role-eta"></p>
      </div>
      <span id="next-role-mobile"></span>
    </div>
  </div>

  <div id="map">

  </div>
  <div class="lat-lng-container" data-help="map_coordinates_container">
    <p></p><button id="lat-lng-container-close-button">×</button>
  </div>

  <div class="map-cycle-alert hidden">
    <span data-text="map.refresh_for_updates_alert">Today's cycles haven't been updated yet.
      Please refresh to check for updates.</span>
  </div>

  <div class="filter-alert" style="display: none;">
    Some markers are being hidden.
  </div>

  <!-- Modals -->
  <div class="modal fade" id="fme-enabled-events-modal" tabindex="-1" role="dialog"
    aria-labelledby="fme-enabled-events-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="fme-enabled-events-title" data-text="menu.modal_fme_enabled_events_title">
            Free Roam Event Settings
          </h4>
        </div>
        <div class="modal-body">
          <p data-text="menu.modal_fme_enabled_events_body">
            Select which events you want to display on the map and/or to receive notifications for.
          </p>
          <div id="events" class="settings-container"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.close">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="map-updates-modal" tabindex="-1" role="dialog" aria-labelledby="map-updates-title">
    <div class="modal-dialog modal-updates" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="map-updates-title" data-text="menu.modal_map_updates_title">Collector Map Updates
          </h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.close">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="loot-table-modal" tabindex="-1" role="dialog" aria-labelledby="loot-table-title">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="loot-table-title" data-text="menu.modal_loot_table_title">Loot Table</h4>
        </div>
        <div class="modal-body">
          <p data-text="menu.modal_loot_table_body"></p>
          <div id="loot"></div>
          <p data-text="menu.modal_loot_table_all_tables_descr"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.close">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="custom-marker-color-modal" tabindex="-1" role="dialog"
    aria-labelledby="custom-marker-color-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="custom-marker-color-title" data-text="menu.custom_marker_color_title">
            Custom markers colors
          </h4>
        </div>
        <div class="modal-body">
          <p data-text="menu.custom_marker_color_body"></p>
          <div id="custom-colors" class="settings-container" style="font-size: 1.3rem"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.close">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="clear-markers-modal" tabindex="-1" role="dialog" aria-labelledby="clear-markers-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="clear-markers-title" data-text="menu.modal_clear_markers_title">
            Reset markers?
          </h4>
        </div>
        <div class="modal-body" data-text="menu.modal_clear_markers_body">
          This will reset all markers you've removed from the map. This action cannot be undone.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.no">No</button>
          <button id="clear-markers" type="button" class="btn btn-danger" data-dismiss="modal"
            data-text="menu.yes">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="clear-important-items-modal" tabindex="-1" role="dialog"
    aria-labelledby="clear-important-items-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="clear-important-items-title" data-text="menu.modal_clear_important_items_title">
            Clear important markers?
          </h4>
        </div>
        <div class="modal-body" data-text="menu.modal_clear_important_items_body">
          This will clear the highlight from all markers marked as important. This action cannot be undone.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.no">No</button>
          <button id="clear_highlights" type="button" class="btn btn-danger" data-dismiss="modal"
            data-text="menu.yes">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="clear-inventory-modal" tabindex="-1" role="dialog"
    aria-labelledby="clear-inventory-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="clear-inventory-title" data-text="menu.modal_clear_inventory_title">
            Clear inventory?
          </h4>
        </div>
        <div class="modal-body" data-text="menu.modal_clear_inventory_body">
          This will clear your inventory. This action cannot be undone.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.no">No</button>
          <button id="clear-inventory" type="button" class="btn btn-danger" data-dismiss="modal"
            data-text="menu.yes">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="clear-routes-modal" tabindex="-1" role="dialog" aria-labelledby="clear-routes-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="clear-routes-title" data-text="menu.modal_clear_routes_title">
            Remove custom routes?
          </h4>
        </div>
        <div class="modal-body" data-text="menu.modal_clear_routes_body">
          This will remove all custom routes currently on the map. Unsaved progress will be lost.
          This action cannot be undone.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.no">No</button>
          <button id="clear-custom-routes" type="button" class="btn btn-danger" data-dismiss="modal"
            data-text="menu.yes">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="delete-all-settings-modal" tabindex="-1" role="dialog"
    aria-labelledby="delete-all-settings-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="delete-all-settings-title" data-text="menu.modal_delete_all_settings_title">
            Reset all settings?
          </h4>
        </div>
        <div class="modal-body" data-text="menu.modal_delete_all_settings_body">
          This will reset all settings to their default values and reload the page.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.no">No</button>
          <button id="delete-all-settings" type="button" class="btn btn-danger" data-dismiss="modal"
            data-text="menu.yes">Yes</button>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="remove-all-pins-modal" tabindex="-1" role="dialog"
    aria-labelledby="remove-all-pins-title">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="remove-all-pins-title" data-text="menu.modal_remove_all_pins_title">remove all
            pins?</h4>
        </div>
        <div class="modal-body" data-text="menu.modal_remove_all_pins_body">
          This will delete all your custom pins. This action cannot be undone.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.no">No</button>
          <button id="remove-all-pins" type="button" class="btn btn-danger" data-dismiss="modal"
            data-text="menu.yes">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="mapping-modal" tabindex="-1" role="dialog" aria-labelledby="mapping-modal-title">
    <div class="modal-dialog modal-updates" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="mapping-modal-title">Mapping keys</h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.close">Close</button>
        </div>
      </div>
    </div>
  </div>
  
  <div class="modal fade" id="import-rdo-inventory-modal" tabindex="-1" role="dialog" aria-labelledby="import-rdo-inventory-modal-title">
    <div class="modal-dialog modal-updates" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="import-rdo-inventory-modal-title" data-text="menu.modal_import_rdo_inventory_title">Import RDO character inventory</h4>
        </div>
        <div class="modal-body" style="text-align: left;">
          <p data-text="menu.modal_import_rdo_inventory_extension">You can sync your inventory using this extension. Just install it and press one button. Compatible with Chromium based browsers like Brave, Google Chrome, Microsoft Edge, Opera.</p>
          <p class="chrome-store-button">
            <a href="https://chrome.google.com/webstore/detail/red-dead-online-collector/ppkogdbkpfkienlkjoicbpogdeonalih" target="_blank">
              <img src="./assets/images/chrome_web_store.png">
            </a>
          </p>
          <div class="header">
            <span class="header-border"></span>
            <h2 class="header-title" data-text="menu.modal_import_rdo_inventory_manual">Manual</h2>
            <span class="header-border"></span>
          </div>
          <p data-text="menu.modal_import_rdo_inventory_intro">To import your character inventory to this map, follow this steps:</p>

          <p data-text="menu.modal_import_rdo_inventory_step_1">1. <a href="https://socialclub.rockstargames.com/games/rdo/overview" target="_blank">Log in</a> your Social Club account.</p>
          <p data-text="menu.modal_import_rdo_inventory_step_2">2. Click box bellow to copy its content.</p>
          <textarea id="inventory-script" class="input-text" style="max-width: 100%;min-width: 100%;max-height:45px;min-height:45px;margin:10px 0" readonly>fetch('https://jeanropke.github.io/RDR2CollectorsMap/assets/js/rdo-inventory.js').then(data => data.text()).then(eval);</textarea>
          <p data-text="menu.modal_import_rdo_inventory_step_3">3. Open your browser console on Social Club website and paste the script from step 2 and press enter.</p>
          <br>
          <p data-text="menu.modal_import_rdo_inventory_final">If everything is right, a new file will be downloaded with your inventory data. Just import it using the button bellow.</p>
          <br>
          <div class="input-container-noflex">
            <input id="rdo-inventory-import-file" type="file" class="input-file" accept=".json" autocomplete="off">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-text="menu.close">Close</button>
          <button id="import-rdo-inventory" type="button" class="btn btn-primary" data-text="menu.import_button">Import</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ES6 Compatibility Check -->
  <script>function isES6() { try { return eval("() => {};"), !0 } catch (r) { return !1 } } isES6() || alert("This browser might not be fully supported, and errors will likely occur. Please update your browser if you experience issues.");</script>

  <script src="https://js.sentry-cdn.com/8bb034d026aa4fb38d3428be80b9f776.min.js" crossorigin="anonymous" data-lazy="no"></script>
  <script src="assets/js/lib/jquery-3.4.1.min.js"></script>
  <script src="assets/js/lib/bootstrap.min.js"></script>
  <script src="assets/js/loader.js?nocache=1581"></script>
  <script src="assets/js/lib/popper.min.js"></script>
  <script src="assets/js/lib/tippy.min.js"></script>
  <script src="assets/js/lib/jquery.cookie.js"></script>
  <script src="assets/js/lib/leaflet.js"></script>
  <script src="assets/js/lib/oms.min.js"></script>
  <script src="assets/js/lib/rbush.js"></script>
  <script>var module = {};</script>
  <script src="assets/js/lib/leaflet.canvas-markers.js"></script>
  <script>module.exports(L);</script>
  <script src="assets/js/layers.js?nocache=1581"></script>
  <script src="assets/js/settings.js?nocache=1581"></script>
  <script src="assets/js/mapping.js?nocache=1581"></script>
  <script src="assets/js/nazar.js?nocache=1581"></script>
  <script src="assets/js/fme.js?nocache=1581"></script>
  <script src="assets/js/cycles.js?nocache=1581"></script>
  <script src="assets/js/marker.js?nocache=1581"></script>
  <script src="assets/js/inventory.js?nocache=1581"></script>
  <script src="assets/js/treasures.js?nocache=1581"></script>
  <script src="assets/js/legendary.js?nocache=1581"></script>
  <script src="assets/js/pins.js?nocache=1581"></script>
  <script src="assets/js/map.js?nocache=1581"></script>
  <script src="assets/js/language.js?nocache=1581"></script>
  <script src="assets/js/menu.js?nocache=1581"></script>
  <script src="assets/js/items.js?nocache=1581"></script>
  <script src="assets/js/category-collection.js?nocache=1581"></script>
  <script src="assets/js/routes.js?nocache=1581"></script>
  <script src="assets/js/pathfinder.main.js?nocache=1581"></script>
  <script src="assets/js/updates.js?nocache=1581"></script>
  <script src="assets/js/scripts.js?nocache=1581"></script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39999584-4"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-39999584-4');

  </script>
</body>

</html>
